<template>
  <div class="home">
      <button @click="visible=true">添加</button>
      <ul>
          <li v-for="(item,index) in list">
              {{item.username}} - {{item.age}} - {{item.address}}
              <button @click="edit(item)">编辑</button>
              <button @click="del(item.id)">删除</button>
          </li>
      </ul>
      <div>
          <span v-for="(item,index) in num" :key="index" @click="page(item)">{{item}}</span>
      </div>
      <div class="dialog" v-show="visible">
          用户名：<input type="text" v-model="username">
          年龄：<input type="text" v-model="age">
          地址：<input type="text" v-model="address">
          <button @click="cur">确认</button>
      </div>
  </div>
</template>

<script>
import request from '../util/request'
export default {
    name: 'Home',
    data(){
        return {
            list:[],
            username:'',
            age:'',
            address:'',
            id:'', //
            visible:false,
            limit:2,  //每页的条数
            pagenum:1, //第几页数据
            num:0      //一共多少页数据
        }
    },
    created(){
        this.getDate();
    },
    methods:{
        getDate(){
            request.get('/api/list',{pagenum:this.pagenum,limit:this.limit}).then(res => {
                console.log(res);
                if(res.code === 1){
                    this.list = res.data;
                    this.num = Math.ceil(res.total/this.limit);
                }
            })
        },
        //添加  修改  区别：是否有id  如果id有值，说明要修改  没值，说明要添加

        /***
         * 添加  没有id   /api/add     post      username,age,address
         * 
         * 
         * 
         * 修改  有id     /api/edit     put     username,age,address,id
         * */ 
        cur(){
            //post携带参数
            //参数校验 或者 说容错处理
            if(this.username && this.age && this.address){
                let url = '',
                    type='';
                if(this.id){
                    //修改
                    url = '/api/edit';
                    type = 'put';
                }else{
                    //添加
                    url = '/api/add';
                    type = 'post';
                }
                request[type](url,{username:this.username,age:this.age,address:this.address,id:this.id}).then(res => {
                    console.log(res);
                    if(res.code === 1){
                        this.getDate();
                        //1.弹窗关掉  2.input清空  3.获取列表数据
                        this.username = '';
                        this.age = '';
                        this.address = '';
                        this.visible = false;
                        this.id = '';
                    }else{
                        console.log("失败")
                    }
                })
            }else{
                alert("参数有误")
            }
        },

        //删除
        del(id){
            instance.delete('/api/del',{id}).then(res => {
                if(res.code === 1){
                    console.log("删除成功");
                    this.getDate();
                }else{
                    console.log("删除失败")
                }
            })
        },
        
        //编辑
        edit(item){
            //1.弹窗显示  2.把当前条的信息展示到input
            this.visible = true;
            let {username,age,address,id} = item;
            this.username = username;
            this.age = age;
            this.address = address;
            this.id = id;
        },

        //分页
        page(pagenum){
            this.pagenum = pagenum;
            this.getDate();
        }
    }
}
</script>



